<template>
  <d2-container>
    <el-form
      inline
      style="width: 100%; text-align: left"
      label-width="80px"
      ref="form"
      @submit.native.prevent="onSubmit"
      @reset.native.prevent="onReset"
      size="small"
    >
      <el-form-item label="关键词">
        <el-input
          v-model="query.keywords"
          placeholder="昵称|姓名|账户|用户id"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="筛选时间">
        <el-date-picker
          v-model="query.time_start"
          type="date"
          size="small"
          style="width: 180px"
          format="yyyy-MM-dd"
          :picker-options="startTimePickerOption"
          value-format="timestamp"
          placeholder="选择开始日期"
        >
        </el-date-picker>
        -
        <el-date-picker
          v-model="query.time_end"
          type="date"
          size="small"
          style="width: 180px"
          format="yyyy-MM-dd"
          :picker-options="endTimePickerOption"
          value-format="timestamp"
          placeholder="选择结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="提现方式">
        <el-select v-model="query.type">
          <el-option label="全部" value=""></el-option>
          <el-option label="支付宝" value="alipay"></el-option>
          <el-option label="微信" value="wechat"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="query.status">
          <el-option label="全部" value=""></el-option>
          <el-option label="待审核" value="0"></el-option>
          <el-option label="通过" value="1"></el-option>
          <el-option label="拒绝" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="submit">筛选 </el-button>
        <!--        <el-button native-type="reset">重置</el-button>-->
      </el-form-item>
    </el-form>
    <el-table :data="list" border :resizable="false" stripe>
      <el-table-column label="流水号" prop="trade_no"></el-table-column>
      <el-table-column label="用户ID" prop="user_id"></el-table-column>
      <el-table-column label="昵称" prop="name"></el-table-column>
      <el-table-column label="姓名" prop="time_create">
        <template slot-scope="{ row }">
          {{ row.account ? row.account.name : '无' }}
        </template>
      </el-table-column>
      <el-table-column label="提现方式" prop="time_create">
        <template slot-scope="{ row }">
          {{ TYPE_MAP[row.type] }}
        </template>
      </el-table-column>
      <el-table-column label="账户" prop="time_create">
        <template slot-scope="{ row }">
          {{ row.account ? row.account.account: '无' }}
        </template>
      </el-table-column>
      <el-table-column label="收款码" prop="image">
        <template slot-scope="{ row }">
          <el-image
            fit="cover"
            v-if="row.account"
            :src="row.account.image"
            class="fit-size"
            :preview-src-list="[row.account.image]"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column label="申请时间" width="150" prop="time_create">
        <template slot-scope="{ row }">
          {{ row.time_create }}
        </template>
      </el-table-column>
      <el-table-column label="提现金额" prop="time_create">
        <template slot-scope="{ row }">
          {{ row.money | moneyFilter }}
        </template>
      </el-table-column>
      <el-table-column label="手续费" prop="time_create">
        <template slot-scope="{ row }">
          {{ row.tax | moneyFilter }}
        </template>
      </el-table-column>
      <el-table-column label="打款金额" prop="time_create">
        <template slot-scope="{ row }">
          {{ row.real_money | moneyFilter }}
        </template>
      </el-table-column>
      <el-table-column label="审核状态" prop="time_create">
        <template slot-scope="{ row }">
          {{ ["待审核", "通过", "拒绝"][row.status] }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="145">
        <template slot-scope="{ row }">
          <template v-if="isProcessing(row)">
            <el-button type="text" size="small" @click="refuse(row)"
              >拒绝
            </el-button>
            <el-button type="text" size="small" @click="pass(row)"
              >通过
            </el-button>
          </template>
          <template v-else>
            <el-button type="text" size="small" @click="view(row)"
              >详情
            </el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      layout="total, prev, pager, next"
      background
      @current-change="fetch"
      :current-page.sync="currentPage"
      :page-size="limit"
      style="display: flex;justify-content: center;"
      :total="total"
    >
    </el-pagination>
    <withdraw-refuse ref="withdrawRefuse"></withdraw-refuse>
    <view-dialog ref="viewDialog"></view-dialog>
  </d2-container>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import commonCurd from '@/mixin/common-curd'
import withdrawRefuse from './components/withdraw-refuse'
import viewDialog from './components/view-dialog'
import { verify } from './api'

const TYPE_MAP = {
  alipay: '支付宝',
  wechat: '微信'
}

export default {
  name: 'withdraw',
  data () {
    const _this = this
    return {
      query: {
        keywords: undefined,
        type: '',
        time_start: '',
        time_end: '',
        status: ''
      },
      TYPE_MAP,
      startTimePickerOption: {
        disabledDate (date) {
          if (!_this.query.time_end > 0) {
            return false
          }
          const timestamp = new Date(date).getTime()
          return _this.query.time_end < timestamp
        }
      },
      endTimePickerOption: {
        disabledDate (date) {
          if (!_this.query.time_start > 0) {
            return false
          }
          const timestamp = new Date(date).getTime()
          return _this.query.time_start > timestamp
        }
      }
    }
  },
  components: {
    withdrawRefuse,
    viewDialog
  },
  mixins: [commonCurd],
  async asyncData ({ store, route }) {
    return store.dispatch('withdraw/fetchList', {
      page: 1,
      limit: 12
    })
  },
  computed: {
    ...mapGetters('withdraw', ['list', 'total'])
  },
  methods: {
    ...mapActions('withdraw', ['fetchList']),
    isProcessing ({ status }) {
      return status === 0
    },
    async refuse ({ id }) {
      const { content = false } = await this.$refs.withdrawRefuse.open()
      if (content) {
        await verify({ id }, { status: 2, fail_reason: content })
        this.$message.success('拒绝成功')
      }
      this.fetch()
    },
    async pass ({ id }) {
      await verify({ id }, { status: 1 })
      this.$message.success('审核成功')
      this.fetch()
    },
    async view (row) {
      await this.$refs.viewDialog.open(row)
    },
    onSubmit () {
      this.fetch(1)
    },
    onReset () {
      this.$refs.form.resetFields()
      this.query = this.$options.data
      this.fetch(1)
    }
  }
}
</script>
<style lang="scss" scoped>
.fit-size {
  height: 80px;
}
</style>
